<script setup>
import { ref } from 'vue';
//导入axios
import request from '../axios/axios.js'

//创建变量
let inputDepositId=ref("");
let inputUserId=ref("");
let inputDormitoryId=ref("")


//通过充值记录id删除
async function deleteDepositInfoById(){
    let {data} = await request.get("/deleteDepositById",{
        params:{
            depositId:inputDepositId.value
        }
    })

    if(data.statusCode==200){
        alert(data.message);
    }else{
        alert(data.message);
    }

}
//通过用户id删除
async function deleteDepositInfoByUserId(){
    let {data} = await request.get("/deleteDepositByUserId",{
        params:{
            userId:inputUserId.value
        }
    })

    if(data.statusCode==200){
        alert(data.message);
    }else{
        alert(data.message);
    }


}
//通过宿舍id删除
async function deleteDepositInfoByDormitoryId(){
    let {data} =await request.get("/deleteDepositByDormitoryId",{
        params:{
            dormitoryId:inputDormitoryId.value
        }
    })

    if(data.statusCode==200){
        alert(data.message);
    }else{
        alert(data.message);
    }
}

</script>

<template>
    管理员水电费充值记录界面
    删除

    


    <div class="Dormitory">


        <div style="width: 100%; height: 80%;">
            <!-- 寝室信息展示 -->
            <table style="width: 100%; height: 100%;">
               <tr class="trb">
                    <td class="name">充值记录id删除</td ><td class="content"  > <input type="text"   v-model="inputDepositId" /></td>
                    <td>
                        
                           <button @click="deleteDepositInfoById()">删除</button>
                     
                    </td>
                </tr>
                
                <tr class="trb">
                    <td class="name">用户名id删除</td ><td class="content"  > <input type="text"  v-model="inputUserId" /></td>
                    <td>
                        
                           <button @click="deleteDepositInfoByUserId()">删除</button>
                        
                    </td>
                </tr>
                <tr class="trb">
                    <td class="name">寝室id删除</td ><td class="content"  > <input type="text"  v-model="inputDormitoryId" /></td>
                    <td>
                       
                           <button @click="deleteDepositInfoByDormitoryId()">删除</button>
                        
                    </td>
                </tr>
                
                      
            </table>
            
        </div>
        
    </div>
</template>

<style scoped>

    
.name{   
      width: 20%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
